<!DOCTYPE html>
<html layout:decorate="~{layout/master}" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <style>
        .tree-banner {
            height: 500px;
            overflow: auto;
        }
    </style>

</head>

<body>
<div layout:fragment="content">
    <Row :gutter="16">
        <i-col span="5">
            <i-button type="primary" @click="addTopData">新增</i-button>
            <i-button type="primary" @click="editTopData">修改</i-button>
            <i-menu theme="light" @on-select="onSelTopData">
                <template v-for="item in topListData">
                    <Menu-item :name="item.paramKey">
                        {{item.name}}
                    </Menu-item>
                </template>
            </i-menu>
        </i-col>
        <i-col span="10">
            <div v-if="selTopData.dataType =='text'">
                <i-input v-model="form.dataValue" type="textarea" :rows="4" placeholder="请输入..."></i-input>
            </div>
            <div v-if="selTopData.dataType=='combobox'">
                <i-table :data="dtData" :columns="dtCols" :height="500" size="small" :highlight-row="true"
                         @on-current-change="onSelComboboxRow" stripe></i-table>
            </div>
        </i-col>
        <i-col span="9">
            <div v-if="selTopData.dataType =='text'">
                <i-button type="primary" @click="saveText">保存</i-button>
            </div>
            <div v-if="selTopData.dataType=='combobox'">
                <div>
                    <i-button type="primary" @click="addComboboxData">新增</i-button>
                    <i-button type="primary" @click="saveComboboxData">修改</i-button>
                    <i-button type="primary" @click="removeComboboxData">删除</i-button>
                </div>
                <i-form ref="myForm" :model="form" label-position="top" :rules="ruleValidate">
                    <Form-item label="编码">
                        <i-input v-model="form.code" placeholder="请输入"></i-input>
                    </Form-item>
                    <Form-item label="名称" prop="name">
                        <i-input v-model="form.name" placeholder="请输入"></i-input>
                    </Form-item>
                    <Form-item label="启用/禁用">
                        <i-switch v-model="form.dom_isUse" size="large" @on-change="changeIsUse">
                            <span slot="open">启用</span>
                            <span slot="close">禁用</span>
                        </i-switch>
                    </Form-item>
                    <Form-item label="备注">
                        <i-input v-model="form.remark" type="textarea" :rows="4" placeholder="请输入"></i-input>
                    </Form-item>
                </i-form>
            </div>
            <!--<div x-if="selModel.type=='tree'">-->
            <!--<Row gutter="24" style="width:100%">-->
            <!--<i-col span="12">-->
            <!--<i-button type="primary" @click="addTopMenu">新增一级菜单</i-button>-->
            <!--<i-button type="primary" @click="addChildMenu">新增子级菜单-->
            <!--</i-button>-->
            <!--<i-button type="primary" @click="addPower">新增权限</i-button>-->
            <!--<div class="tree-banner">-->
            <!--<Tree ref="myTree" :data="treeData" @on-select-change="onSelNode"></Tree>-->
            <!--</div>-->

            <!--</i-col>-->
            <!--<i-col span="12">-->
            <!--<i-form ref="myForm" :model="form" :rules="ruleValidate" label-position="top" v-if="showForm">-->
            <!--<Form-item label="键" prop="key">-->
            <!--<i-input v-model="form.key"></i-input>-->
            <!--</Form-item>-->
            <!--<Form-item label="父级键" v-if="nodeType=='menu'">-->
            <!--<i-input v-model="form.parentKey"></i-input>-->
            <!--</Form-item>-->
            <!--<Form-item label="关联菜单键名" v-if="nodeType=='power'">-->
            <!--<i-input v-model="form.menuKey"></i-input>-->
            <!--</Form-item>-->
            <!--<Form-item label="名称" prop="name">-->
            <!--<i-input v-model="form.name"></i-input>-->
            <!--</Form-item>-->
            <!--<Form-item label="页面地址" v-if="nodeType=='menu'">-->
            <!--<i-input v-model="form.uri"></i-input>-->
            <!--</Form-item>-->
            <!--<Form-item label="图标" v-if="nodeType=='menu'">-->
            <!--<i-input v-model="form.icon"></i-input>-->
            <!--</Form-item>-->
            <!--<Form-item label="排序" v-if="nodeType=='menu'">-->
            <!--<i-input v-model="form.orderIndex"></i-input>-->
            <!--</Form-item>-->
            <!--<Form-item label="扩展功能" v-if="nodeType=='menu' && !form.id">-->
            <!--<Checkbox v-model="autoCreateOpen">自动创建浏览权限</Checkbox>-->
            <!--</Form-item>-->
            <!--<Form-item>-->
            <!--<i-button type="primary" @click="save">保存</i-button>-->
            <!--<i-button type="error" style="margin-left: 8px" @click="remove">删除</i-button>-->
            <!--</Form-item>-->
            <!--</i-form>-->
            <!--</i-col>-->
            <!--</Row>-->
            <!--</div>-->
        </i-col>
    </Row>

</div>

<script layout:fragment="script">
    const m_apis = {
        getTopList() {
            return PB.apiRoute('/api/sys/param/getTopList', 'GET')
        },
        getDataValue(p_key) {
            return PB.apiRoute('/api/sys/param/getDataValue?paramKey=' + p_key, 'GET');
        },
        addCombobox(p_body) {
            return PB.apiRoute('/api/sys/param/addCombobox', 'POST', p_body);
        },
        saveCombobox(p_body) {
            return PB.apiRoute('/api/sys/param/saveCombobox', 'POST', p_body);
        },
        removeCombobox(p_id) {
            return PB.apiRoute('/api/sys/param/removeCombobox?id=' + p_id, 'POST');
        },
        saveText(p_body) {
            return PB.apiRoute('/api/sys/param/saveText', 'POST', p_body);
        }
    };
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                apis: m_apis,
                title: '参数设置',
                topListData: [],
                selTopData: {},
                dtData: [],
                selComboboxRow: null,
                dtCols: [
                    {
                        title: '编码',
                        key: 'code'
                    },
                    {
                        title: '名称',
                        key: 'name'
                    }
                ],
                treeData: [],
                selNode: null,
                dbData: [],
                actionType: '',
                nodeType: 'menu',
                showForm: false,
                form: {
                    dom_isUse: true,
                    enable: 1
                },
                autoCreateOpen: true,
                ruleValidate: {
                    paramKey: [
                        {required: true, message: '键不能为空', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '名称不能为空', trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
            this.loadTopData();
        },
        computed: {},
        methods: {
            loadTopData() {
                let that = this;
                this.showForm = false;
                this.selNode = null;
                PB.ajax(this.apis.getTopList(), function (d) {
                    that.topListData = d.data;
                });
            },
            addTopData() {
                PB.showFormPage('sys/param/detail', this.title);
            },
            editTopData() {
                PB.showFormPage('sys/param/detail?id=' + this.selTopData.id, this.title);
            },
            changeIsUse(status) {
                this.form.enable = status ? 1 : 0;
            },
            onSelTopData(nodeName) {

                this.selTopData = this.topListData.filter(q => q.paramKey === nodeName)[0];
                switch (this.selTopData.dataType) {
                    case 'text':
                        this.loadText(nodeName);
                        break;
                    case 'combobox':
                        this.loadCombbox(nodeName);
                        break;
                    case 'tree':
                        break;
                }
            },
            loadText(paramKey) {
                let that = this;
                PB.ajax(this.apis.getDataValue(paramKey), function (d) {
                    if (d.data && d.data.length > 0) {
                        that.form = d.data[0];
                    }
                    else {
                        that.form = {};
                    }
                });
            },
            loadCombbox(paramKey) {
                let that = this;
                PB.ajax(this.apis.getDataValue(paramKey), function (d) {
                    that.dtData = d.data;
                });
            },
            onSelComboboxRow(currentRow, oldCurrentRow) {
                this.selComboboxRow = currentRow;
                this.form = this.selComboboxRow;
                this.form.dom_isUse = !!this.form.enable;
            },
            addComboboxData() {
                this.$refs['myForm'].validate((valid) => {
                    if (valid) {
                        this.form.paramKey = this.selTopData.paramKey;
                        this.form.children = [];
                        let that = this;
                        PB.ajax(this.apis.addCombobox(this.form), function (d) {
                            that.$refs['myForm'].resetFields();
                            that.form = {};
                            that.loadCombbox(that.selTopData.paramKey);
                        });
                    }
                });
            },
            saveComboboxData() {
                this.$refs['myForm'].validate((valid) => {
                    if (valid) {
                        this.form.children = [];
                        let that = this;
                        PB.ajax(this.apis.saveCombobox(this.form), function (d) {
                            that.$refs['myForm'].resetFields();
                            that.form = {};
                            that.loadCombbox(that.selTopData.paramKey);

                        });
                    }
                });
            },
            removeComboboxData() {
                let that = this;
                PB.confirm('确定删除吗？', function () {
                    PB.ajax(that.apis.removeCombobox(that.selComboboxRow.id), function (d) {
                        this.$refs['myForm'].resetFields();
                        that.form = {};
                        that.loadCombbox();
                    });
                });

            },
            updateTree(that) {
                let arr = [];
                arr = createData(that.dbData);
                that.treeData = arr;
                that.actionType = '';
                that.selNode = null;
                that.form = {};

                function createData(data) {
                    if (!data) {
                        return null;
                    }
                    let treeNodes = [];
                    for (let info of data) {
                        let node = createTreeNode(info);
                        node.expand = true;
                        if (info.children) {
                            node.children = createModuleData(info.children);
                        }
                        treeNodes.push(node);
                    }

                    return treeNodes;

                    function createModuleData(p_moduleData) {
                        let arrModelData = [];
                        for (let info of p_moduleData) {
                            let node = createTreeNode(info);

                            let arrChildNodes = [];
                            if (info.power) {
                                node.expand = false; // 子模块暂时全部收起来
                                for (let p_info of info.power) {
                                    let p_node = createTreeNodePower(p_info);

                                    arrChildNodes.push(p_node);
                                }
                            }


                            if (info.children) {
                                node.expand = true; // 子模块暂时全部收起来
                                for (let c_info of info.children) {
                                    let c_node = createTreeNode(c_info);


                                    if (c_info.power) {
                                        let arrCPNodes = [];
                                        for (let cp_info of c_info.power) {
                                            let cp_node = createTreeNodePower(cp_info);

                                            arrCPNodes.push(cp_node);
                                        }
                                        c_node.children = arrCPNodes;
                                    }

                                    arrChildNodes.push(c_node);
                                }
                            }

                            node.children = arrChildNodes;

                            arrModelData.push(node);
                        }

                        return arrModelData;
                    }

                    function createTreeNode(info) {
                        let node = {};
                        if (info.icon) {
                            node.title = '<i class="ivu-icon ivu-icon-' + info.icon + '"></i>' + info.paramKey + ' ' + info.name;
                        }
                        else {
                            node.title = info.paramKey + ' ' + info.name;
                        }

                        node.id = info.id;
                        node.paramKey = info.paramKey;
                        node.uri = info.uri;
                        node.parentKey = info.parentKey;
                        node.icon = info.icon;
                        node.name = info.name;
                        node.orderIndex = info.orderIndex;
                        node.enable = info.enable;

                        return node;
                    }

                    function createTreeNodePower(info) {
                        let node = {};
                        node.title = '<span style="color: red">' + info.paramKey + ' ' + info.name + '</span>';
                        node.paramKey = info.paramKey;
                        node.name = info.name;
                        node.menuKey = info.menuKey;
                        node.id = info.id;

                        return node;
                    }
                }
            },
            onSelNode(nodes) {
                if (nodes && nodes.length > 0) {
                    let node = nodes[0];
                    this.selNode = node;
                    this.form = { // 为了避免树控件额外属性污染表单属性，需要逐个赋值一次
                        id: node.id,
                        name: node.name,
                        paramKey: node.paramKey,
                        parentKey: node.parentKey,
                        menuKey: node.menuKey,
                        uri: node.uri,
                        icon: node.icon,
                        orderIndex: node.orderIndex,
                        enable: node.enable
                    };
                    if (this.selNode.menuKey) {
                        this.nodeType = 'power';
                    }
                    else {
                        this.nodeType = 'menu';
                    }

                    this.showForm = true;
                }
                else {
                    this.selNode = null;
                    this.showForm = false;
                }
            },
            addTopMenu() {
                this.initAddForm('1');
                this.nodeType = 'menu';
            },
            addChildMenu() {
                this.initAddForm('2');
                this.nodeType = 'menu';
            },
            addPower() {
                this.initAddForm('3');
                this.nodeType = 'power';
            },
            initAddForm(p_Type) {
                let flag = false;
                this.form = {}; // 清空表单数据
                switch (p_Type) {
                    case '1':
                        this.form.parentKey = '0';
                        flag = true;
                        break;
                    case '2':
                        if (!this.selNode) {
                            PB.alert('请先选中一个上级节点');
                            flag = false;
                            break;
                        }
                        this.form.parentKey = this.selNode.paramKey;
                        flag = true;
                        break;
                    case '3':
                        if (this.nodeType != 'menu') { // 需要额外判断选中的是菜单，而不是权限节点
                            PB.alert('请先选中一个菜单节点');
                            flag = false;
                            break;
                        }
                        this.form.menuKey = this.selNode.paramKey;
                        flag = true;
                        break;
                }
                if (flag) {
                    this.actionType = p_Type;
                    this.showForm = true;
                }
            },
            saveText() {
                this.form.paramKey = this.selTopData.paramKey;
                PB.ajax(this.apis.saveText(this.form), function (d) {
                    PB.toast(d.msg);
                });
            },
            save() {
                this.$refs['myForm'].validate((valid) => {
                    if (valid) {

                        let flag = false;
                        switch (this.actionType) {
                            case '1':
                                flag = true;
                                break;
                            case '2':
                                if (!this.form.parentKey) {
                                    PB.alert('请输入上级节点键名');
                                    flag = false;
                                    break;
                                }

                                flag = true;
                                break;
                            case '3':
                                if (!this.selNode) {
                                    PB.alert('请先选中一个菜单节点');
                                    flag = false;
                                    break;
                                }
                                flag = true;
                                break;
                            default:
                                // 如果actionType是空，表示是修改
                                if (!this.selNode) {
                                    PB.alert('请先选中一个节点');
                                    flag = false;
                                    break;
                                }
                                flag = true;
                                break;
                        }
                        if (flag) {
                            let that = this;
                            if (this.nodeType == 'menu') {
                                PB.ajax(this.apis.save(this.form, this.autoCreateOpen ? 1 : 0), function (d) {
                                    that.loadData();
                                });
                            }
                            else {
                                PB.ajax(this.apis.menu_power.save(this.form), function (d) {
                                    that.loadData();
                                });
                            }
                        }
                    }
                    else {
                        PB.alert('表单验证失败!');
                    }
                });
            },
            remove() {
                if (!this.selNode) {
                    PB.alert('请先选中一个节点');
                    return;
                }
                let that = this;
                PB.confirm('确定删除吗？', function () {

                    if (that.nodeType == 'menu') {
                        PB.ajax(URI.os.menu.remove(that.form.id), function (d) {
                            that.loadData();
                        });
                    }
                    else {
                        PB.ajax(URI.os.menu_power.remove(that.form.id), function (d) {
                            that.loadData();
                        });
                    }
                });
            }

        }
    });

    function saveOK() {
        window.location.reload();
    }
</script>
</body>
</html>
